<script setup>
import { ref, reactive, toRefs, onBeforeMount } from 'vue'
import { getUserListHandler, deleteUserHandler } from '../../api/user.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import Add from './Add.vue'


const data = reactive({
    items: [],
    userForm: {
        username: "",
        qq: "",
        address: ""
    }
})
// const loading = ref(true)
const addUserDialog = ref(false)
const defaultMethod = ref("Create")


// 添加用户的方法
const addUser = () => {
    data.userForm = {}
    defaultMethod.value = "Create"
    addUserDialog.value = true
}
// 更新用户的方法
const editUser = (row) => {
    defaultMethod.value = "Edit"
    addUserDialog.value = true
    data.userForm = row
}

const closeDialog = () => {
    getUserList()
}
const rollback = () => {
    addUserDialog.value = false
}

// 获取用户列表方法
const getUserList = () => {
    // loading.value = true
    getUserListHandler().then((response) => {
        data.items = response.data.data.items
        // loading.value = false
    })
}

// 删除用户方法
const deleteUser = (row) => {
    ElMessageBox.confirm(
        '你确定要删除用户:' + row.username,
        'Warning',
        {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        }
    ).then(() => {
        // loading.value = true
        deleteUserHandler(row.id).then((response) => {
            data.items = response.data.data.items
            ElMessage({
                message: response.data.message,
                type: "success"
            })
            getUserList()
            // loading.value = false
        })
    }).catch(() => {
        return
    })
}

onBeforeMount(() => {
    getUserList()
})
const { items, userForm } = toRefs(data)
</script>

<template>
    <el-card class="box-card">
    <template #header>
        <div class="card-header">
        <span>用户列表</span>
        <el-button class="button" text @click="addUser()">添加用户</el-button>
        </div>
    </template>
    <!-- 真实数据 -->
        <el-table :data="items" style="width: 100%" height="500" stripe border>
            <el-table-column sortable fixed prop="username" label="用户名" width="180" />
            <el-table-column sortable fixed prop="id" label="ID" width="180" />
            <el-table-column fixed prop="qq" label="QQ" width="180" />
            <el-table-column fixed prop="address" label="地址" width="180" />

            <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="editUser(scope.row)">编辑</el-button>
                <el-button link type="warning" size="small" @click="deleteUser(scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-dialog
    destroy-on-close
    @close="closeDialog()"
    v-model="addUserDialog"
    :title="defaultMethod == 'Create'? '添加用户': '更新用户'"
    width="30%"
    >
        <Add @rollback="rollback()" :method="defaultMethod" :user-form="userForm"></Add>
    </el-dialog>


</template>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text {
    font-size: 14px;
}
.item {
    margin-bottom: 18px;
}
</style>
